<template>
  <div style="overflow: scroll; text-align: center;">
    <div :style="{display: LoanisActive}" style="position: relative; margin: 80px auto;">
      <span class="loan-title">正常放款总额</span>
      <Table stripe border :columns="columnsLoan" :data="dataLoan" class="loan-table"></Table>
      <Button type="primary" class="btn-detail" @click="detail">进入查看详情</Button>
    </div>
    <div style="height: 465px;" :style="{display: DetailisAcitve}">
      <Table border stripe height="415" :columns="columnsDetail" :data="currentData" :row-class-name="rowClassName" style="position:relative; margin: 15px auto;"></Table>
      <Page show-elevator :total="dataCount" :pageSize="pageSize" :current="pageIndex" @on-change="changepage" @on-page-size-change="pagesize" style="text-align: right;"></Page>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isActive: 'block',
      DetailisAcitve: 'none',
      dataCount: [], // 初始化信息总条数
      pageSize: 7, // 每页条数
      originPage: 1,
      params: {
        pageNum: this.originPage,
        pageSize: this.pageSize
      },
      columnsLoan: [
        {
          title: '放款金额',
          key: 'loanMoney'
        },
        {
          title: '已还总金额（不含利息）',
          key: 'interest'
        },
        {
          title: '应收总利息',
          key: 'repayLoanMoney'
        },
        {
          title: '已还总利息',
          key: 'repayInterest'
        }
      ],
      dataLoan: [],
      columnsDetail: [
        {
          title: '姓名',
          key: 'userName',
          width: 100
        },
        {
          title: '身份证号码',
          key: 'userName',
          width: 150
        },
        {
          title: '贷款编号',
          key: 'loanId',
          width: 100
        },
        {
          title: '放款金额',
          key: 'loanAmount'
        },
        {
          title: '已还金额（不含利息）',
          key: 'repayAmount',
          width: 200
        },
        {
          title: '应收利息',
          key: 'interest'
        },
        {
          title: '已还利息',
          key: 'repayInterest'
        }
      ],
      currentData: []
    }
  },
  methods: {
    /**
     * 刷新页面请求
    * */
    refresh () {
      this.getData()
    },
    /**
     * 获取数据
     * */
    getData () {
      this.$api.getNormalLoanCount().then((res) => {
        if (!res.error) {
          // console.log(res.data)
          this.dataLoan = [res.data]
          console.log(res.data)
        } else {
          console.log(this.$Message.error(res.msg))
        }
      })
    },
    detail (params) {
      this.LoanisActive = 'none'
      this.DetailisAcitve = 'block'
      params.pageNum = this.originPage
      params.pageSize = this.pageSize
      console.log('1111')
      this.$api.getNormalLoanCountList(params).then((res) => {
        if (!res.error) {
          console.log(res.data.list)
          this.currentData = res.data.list // 获得表格数据
          this.dataCount = res.data.recordCount // 获得总数据条数
        } else {
          console.log(this.$Message.error(res.msg))
        }
      })
    },
    changepage (index) {
      this.params.pageNum = index
      this.params.pageSize = this.pageSize
      this.$api.getNormalLoanCountList(this.params).then((res) => {
        if (!res.error) {
          console.log('success')
          this.currentData = res.data.list// 获得表格数据
          this.dataCount = res.data.recordCount // 获得总数据条数
          console.log(this.currentData)
        } else {
          console.log('failed')
          console.log(this.$Message.error(res.msg))
        }
      })
    }
  },
  beforecreated () {
    this.getData()
    this.DetailisAcitve = 'none'
  },
  mounted () {
    this.refresh()
  }
}
</script>
<style>
.ivu-table th{
  color: #ebf7ff;
  background-color: #353535;
}
.loan-title {
  font-size: 20px;
  color: #000000;
}
.loan-table {
  position: relative;
  margin: 30px auto;
}
.btn-detail {
  position: relative;
  margin-top: 0;
  background-color: #005fb7 !important;
}
</style>
